<template>
	<view :class="leng > 5 ? 'cents' : 'cented'">
	<view style="width: 355px;height: 140px;position: relative;">
		<image src="../../static/img/bg.png" style="width: 100%;height: 100%;"></image>
		<view style="position: absolute;color: #F5E8DB;z-index: 1;top: 20px;left:20px;">
			<view style="font-size: 14px;">应收金额合计</view>
			<view style="font-size: 20px;">{{money}}</view>
		</view>
		<view style="position: absolute;color: #F5E8DB;z-index: 1;top: 80px;left:20px;">
			<view style="font-size: 14px;">已收金额合计</view>
			<view style="font-size: 20px;">{{moned}}</view>
		</view>
		<view style="position: absolute;color: #F5E8DB;z-index: 1;top: 20px;left:240px;display: flex;align-items: center;"  @click="newbank">
			<image src="../../static/img/icon_qiapian.png" mode="" style="width: 20px;height: 14px;margin-right: 5px;"></image>
			<view>新增银行卡</view>
		</view>
	</view>
	<view class="" v-if="list.length!=0" v-for="(v,i) in list" :key="i" @click="bankdetails(i)">
	<view style="width: 355px;height: 80px;margin-top: 10px;position: relative;" v-if="v.status==0">
		<image src="../../static/img/bg_yhc.png" mode="" style="width: 100%;height: 100%;"></image>
			<text style="color: #042A58;font-size: 18px;position: absolute;top: 13px;left: 30px;">{{v.bankName}}</text>
			<view style="color: #627995;font-size: 16px;position: absolute;top: 48px;left: 30px;">
				<text>{{v.usePeopleName}}</text>
				<text style="margin-left: 15px;">{{v.bankAccount}}</text>
			</view>
			<text style="color: #627995;font-size: 15px;position: absolute;left: 265px;top: 13px;">查看详情</text>
	</view>
	<view style="width: 355px;height: 80px;margin-top: 10px;position: relative;color: #9B9B9B;" v-if="v.status==1">
		<image src="../../static/img/bg_yhcs.png" mode="" style="width: 100%;height: 100%;"></image>
			<text style="font-size: 18px;position: absolute;top: 13px;left: 30px;">{{v.bankName}}</text>
			<view style="font-size: 16px;position: absolute;top: 48px;left: 30px;">
				<text>{{v.usePeopleName}}</text>
				<text style="margin-left: 15px;">{{v.bankAccount}}</text>
			</view>
			<image src="../../static/img/pic_tingyong.png" mode="" style="width: 50px;height: 50px;position: absolute;top: 0;left: 0;"></image>
			<text style="color: #627995;font-size: 15px;position: absolute;left: 265px;top: 13px;">查看详情</text>
	</view>
	</view>
		<view style="display: flex;align-items: center;flex-direction: column;"  v-if="list.length==0">
			<image src="../../static/img/pic_wukas.png" mode="" style="width: 181px;height: 121px;margin-top: 20px;"></image>
			<text style="color: #000000;font-size: 18px;font-weight: 500;margin-top: 44px;">暂无结算卡</text>
			<text style="color: #777777;font-size: 15px;margin-top: 12px;">您还未添加银行卡，请您添加银行卡！</text>
		</view>
		<view class="loading" v-if="leng >= 5">{{ loadingTxt }}</view>
	</view>
</template>

<script>
	import {ajax} from "../../apis.js"
	import {ajaxs} from "../../captainapi.js"
	var page=1; var timer=null ;var that=this
	export default {
		data() {
			return {
				list:[],
				leng:"",
				loadingTxt: '加载更多',
				money:0,
				moned:0,
			}
		},
		onPullDownRefresh() {
			this.getNews()
		},
		onReachBottom() {
			var that=this
			this.getMoreNews()
		},
		onLoad() {
			var that=this
		},
		onShow() {
			ajaxs({
				url:"/v1/order/manager/money",
				method:"post",
				data:{},
				success(res){
					if(res.data.message.acceptedMoney==null){
						that.moned=0
					}else{
						that.moned=res.data.message.acceptedMoney
					}
					if(res.data.message.receivableMoney==null){
						that.money=0
					}else{
						that.money=res.data.message.receivableMoney
					}
				}
			})
			var that=this
			this.getNews()
		},
		methods: {
			// 列表
			getMoreNews(){
				this.loadingTxt="加载中"
				var that=this
				uni.showNavigationBarLoading()
				ajax({
					url:"/v1/user/bankCard/list",
					method:"post",
					data:{offset:page,
					limit:1
					},
					success(res){
						if (that.list.length == res.data.total) {
							that.loadingTxt = '已经全部加载';
							uni.hideNavigationBarLoading();
							return false;
						}
						uni.hideNavigationBarLoading()
						that.list = that.list.concat(res.data.list);
						uni.stopPullDownRefresh()
						 page++
					}
				})
			},
			getNews(){
				page=1;
				var that=this
				uni.showNavigationBarLoading()
				ajax({
					url:"/v1/user/bankCard/list",
					method:"post",
					data:{offset:page,
					limit:8
					},
					success(res){
						that.list=res.data.list
						that.leng=that.list.length
						uni.stopPullDownRefresh()
						 uni.hideNavigationBarLoading()
						 page++
					}
				})
			},
			// 跳转
			bankdetails(i){
				uni.navigateTo({
					url:"./bankdetails?bankname="+this.list[i].bankName+"&bankusername="+this.list[i].bankAccount+"&bankid="+this.list[i].usePeopleName+"&status="+this.list[i].status+"&id="+this.list[i].id
				})
			},
			newbank(i){
				uni.navigateTo({
					url:"./newbank"
				})
			}
		}
	}
</script>

<style>
.cents {
	width: 100%;
	height: 100%;
	background-color: #f5f5f5;
	display: flex;
	align-items: center;
	flex-direction: column;
}
.cented {
	width: 100%;
	height: 663px;
	background-color: #f5f5f5;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.button {
	width: 355px;
	height: 44px;
	background: rgba(4, 42, 88, 1);
	border-radius: 8px;
	position: fixed;
	bottom: 20px;
	color: #ffffff;
}
.but {
	width: 355px;
	height: 44px;
	background: rgba(4, 42, 88, 1);
	border-radius: 8px;
	margin-top: 20px;
	color: #ffffff;
}
.loading {
	text-align: center;
	color: #888;
	margin-top: 10px;
	margin-bottom: 70px;
}
</style>
